<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>逐字打印效果</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        background: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      #text {
        margin: auto;
        color: white;
        font-size: clamp(1.2rem, 3vw, 1.8rem); /* 响应式字体 */
        font-family: "楷体", cursive;
        text-align: center;
        text-shadow: 0 0 10px rgba(255, 64, 129, 0.6);
      }
      #text::after {
        content: "|";
        margin-left: 2px;
        animation: blink 0.7s infinite;
      }
      .cursor {
        margin-left: 2px;
        animation: blink 0.7s infinite;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div id="text"></div>
    <script>
      const text = ["hello😳你好呀", "欢迎来到我的空间✨"];
      let lineIndex = 0;
      let charIndex = 0;
      const textDiv = document.getElementById("text");
      let cursor;
      const typeSpeed = 150; // 打字速度（毫秒）

      function typeText() {
        if (lineIndex < text.length) {
          if (charIndex < text[lineIndex].length) {
            textDiv.innerHTML += text[lineIndex][charIndex++];
            setTimeout(typeText, typeSpeed);
          } else {
            if (lineIndex === text.length - 1) {
              return;
            }
            setTimeout(() => {
              textDiv.innerHTML += "<br>";
              lineIndex++;
              charIndex = 0;
              setTimeout(typeText, typeSpeed);
            }, typeSpeed / 2);
          }
        }
      }
      setTimeout(typeText, typeSpeed);
    </script>
  </body>
</html>
